<template>
  <div>
    <code-editor ref="queryRef" :config="{language:'mysql'}" style="height: 200px"></code-editor>
    <el-tabs>
      <el-tab-pane label="数据处理">
        <div style="text-align: center">
          <el-button type="success" @click="updateOut" icon="el-icon-circle-check">更新配置</el-button>
        </div>
        <code-editor ref="scriptRef" :config="{language: 'java'}" :style="{height: autoHeight }"></code-editor>
      </el-tab-pane>
      <el-tab-pane label="过滤配置">
        <el-table ref="tableRef" v-loading="loading" :data="dataSource" border stripe :height="autoHeight" @row-click="handleRowClick" @select="selectSingle" @select-all="selectAll" @selection-change="selectAll" >
          <el-table-column label="展示名称" prop="filterName"></el-table-column>
          <el-table-column label="查询属性" prop="filterProp"></el-table-column>
          <el-table-column label="值类型" prop="filterType"></el-table-column>
          <el-table-column label="操作" width="120px">
            <template slot="header">
              <el-button type="primary" @click="visible = true" icon="el-icon-circle-plus-outline"></el-button>
            </template>
            <template slot-scope="scope">
              <el-button type="success" icon="el-icon-edit" circle @click="openEdit(scope.row)" title="编辑"></el-button>
              <el-button type="danger" icon="el-icon-delete" circle @click="removeData(scope.row, scope.$index)" title="删除"></el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="lab-table-page">
          <div style="display: inline-flex">
            <el-pagination
                :disabled="loading"
                :current-page="pageInfo.page"
                :page-sizes="[5, 10, 15, 20, 50, 100]"
                :page-size="pageInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageInfo.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
            <el-button-group style="padding: 2px 5px">
              <el-button icon="el-icon-refresh" title="刷新" :disabled="loading" @click="loadSource([])" />
            </el-button-group>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog title="输出配置" :visible.sync="visible" width="600px">
      <el-form label-width="80px" label-position="right">
        <el-form-item label="展示名称" required>
          <el-input v-model="entityInfo.filterName"></el-input>
        </el-form-item>
        <el-form-item label="过滤属性" required>
          <el-input v-model="entityInfo.filterProp"></el-input>
        </el-form-item>
        <el-form-item label="展示顺序" required>
          <el-input-number v-model="entityInfo.filterOrder" controls-position="right" style="width: 100%"></el-input-number>
        </el-form-item>
        <el-form-item label="值类型" required>
          <el-select v-model="entityInfo.filterType" style="width: 100%">
            <el-option value="日期" label="日期"></el-option>
            <el-option value="数字" label="数字"></el-option>
            <el-option value="选项" label="选项"></el-option>
            <el-option value="字符串" label="字符串"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="entityInfo.filterType === '选项'" label="数据源">
          <code-editor ref="codeRef" :config="{language: 'json'}"></code-editor>
        </el-form-item>
        <el-form-item style="text-align: center">
          <el-button icon="el-icon-circle-check" type="success" @click="saveFilter(entityInfo)">{{ entityInfo.outId ? '更新' : '保存' }}</el-button>
          <el-button icon="el-icon-circle-close" type="info" @click="visible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import IdeaTable from "@/mixins/IdeaTable";
import CodeEditor from "@/components/codeEditor/CodeEditor";

export default {
  name: "ExcelFilterTable",
  components: {CodeEditor},
  mixins: [ IdeaTable],
  inject: {
    excelTemplate: {
      from: 'excelTemplate',
      default: function () {
        return { sheets: [], excelId: '0', excelOut: {} }
      }
    }
  },
  computed: {
    autoHeight(){
      return `calc(100vh - 545px)`
    }
  },
  created() {
    this.queryUrl = 'excelFilter/queryPage'
    this.saveUrl = 'excelFilter/save'
    this.removeUrl = 'excelFilter/delete/'
    this.rowKey = 'filterId'
    this.tableRef = 'tableRef'
    this.selectCount = 1
    this.addFilter({ field: 'outId',op: '=',value: this.excelTemplate.excelOut.outId})
    this.loadSource()
    setTimeout(() => {
      this.apdateRef(true)
    }, 500)
  },
  methods: {
    openEdit(row) {
      this.entityInfo = this.$Util.copy(row)
      this.visible = true
      setTimeout(() => {
        const $code = this.$refs.codeRef
        if ($code) {
          $code.setValue(this.entityInfo.filterSource, 'json')
        }
      }, 500)
    },
    apdateRef(set) {
      const $query = this.$refs.queryRef
      const $script = this.$refs.scriptRef
      if (set) {
        $query.setValue(this.excelTemplate.excelOut.querySql || '', 'mysql')
        $script.setValue(this.excelTemplate.excelOut.queryScript || '', 'java')
      } else {
        this.$set(this.excelTemplate.excelOut, 'querySql', $query.code)
        this.$set(this.excelTemplate.excelOut, 'queryScript', $script.code)
      }
    },
    saveFilter(row) {
      row.outId = this.excelTemplate.excelOut.outId
      row.excelId = this.excelTemplate.excelId
      const $code = this.$refs.codeRef
      if ($code) {
        row.filterSource = this.$Util.toTextString($code.code)
      }
      this.saveData(row)
    },
    updateOut() {
      this.apdateRef(false)
      this.$post('excelOut/save', this.excelTemplate.excelOut)
          .then(res => {
            this.$resultMsg(this, res)
            this.$emit('refreshOut')
          })
    }
  }
}
</script>

<style scoped>

</style>
